<template>
  <div class="deepOriginalTitle">
    <el-row :gutter="40">
      <transition name="fade" mode="out-in">
        <el-col :span="24" style="margin-top: 1%" v-loading="loading" element-loading-text="文章标题生成中，预计需要数十秒至数分钟，请耐心等待..." v-if="inputState">
          <el-input
            type="textarea"
            :rows="20"
            class="textarea-box"
            placeholder="请在这里输入原文"
            v-model="textarea"
            @focus="inputevent(true)"
            @blur="inputevent(false)">
          </el-input>
        </el-col>
      </transition>
      <el-col :span="24" style="margin-top: 1%;">
        <el-input
          type="text"
          placeholder="标题将显示在这里"
          v-model="value"
          disabled>
        </el-input>
      </el-col>
    </el-row>
    <el-row style="margin-top: 2%;">
      <!-- <el-col :span="5">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col> -->
      <el-col :span="19">
        <el-button type="primary" :disabled="loading" @click="synonym">一键生成</el-button>
        <el-button @click="reset">清空</el-button>
        <el-button @click="reset1">重置</el-button>
        <!-- <el-button>7天记录</el-button> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { rewriteContentTitle } from "@/api/aiChange";
import { EventBus } from '@/utils/eventBus';
export default {
  name: 'deepOriginalTitle',
  props: {
    inputState: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      tabs: [
        { title: '深度改写', link: '/aichange/deepRewrite' },
        { title: '深度原创', link: '/aichange/aiChange/deepOriginal' },
        { title: '原创标题', link: '/aichange/aiChange/deepOriginalTitle' },
        // ...更多tab
      ],
      iconText: 'el-icon-arrow-up',
      currentTab: 2, // 当前选中的tab索引
      inputState: true,
      textarea: '',
      loading: false,
      value: '',
      iconText: 'el-icon-arrow-up',
      inputState: true,
    }
  },
  computed: {

  },
  created() {

  },
  methods: {
    reset() {
      this.textarea = ''
    },
    reset1 () {
      this.textarea = ''
      this.value = ''
    },
    changeInput() {
      this.inputState = !this.inputState
      if (this.inputState) {
        this.iconText = 'el-icon-arrow-down'
      } else {
        this.iconText = 'el-icon-arrow-up'
      }
    },
    tabsChange(item,index) {
      console.log(item)
      this.currentTab = index
      this.$router.push(item.link)
    },
    inputevent(e) {
      console.log(e)
      EventBus.$emit('siblingEvent', e);
    },
    synonym() {
      const query = {
        form: {
          content: this.textarea
        }
      }
      this.loading = true
      rewriteContentTitle(query).then(res => {
        this.loading = false
        this.value = res.data.info
        console.log(res)
      }).catch(() => {
        this.loading = false
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.deepOriginalTitle {
  padding: 20px 0;
}
.textarea-box {
    :deep(.el-textarea__inner){
        border-radius: 16px;
        border-color:#E5E5E5
    }
}
.textarea-box:hover{
     :deep(.el-textarea__inner){
        box-shadow: 0px 8px 24px -1px rgba(91,111,151,0.12);
    }
}
</style>

